<template>
	<gui-page ref="guiPage" :custom-header="showHeader" :customFooter="true">
		<!-- <template v-slot:gHeader>
		
		</template> -->
		<!-- 页面主体 -->
		<template v-slot:gBody>
			<view v-if="showHeader" class="gui-flex gui-space-between gui-bg-white"
				style="position: fixed;top: 0px;left:0px;width:100%; z-index: 9999;; color: #454545; line-height: 76rpx; height: 76rpx;border-bottom: solid 1rpx #cccccc;">
				<navigator open-type="navigateBack" style="width: 100rpx;text-align: center;font-size: 45rpx;">
					<text class="gui-icons">&#xe600;</text>
				</navigator>
				<view>{{menus[menu_index].label}}</view>
				<view style="width: 100rpx;" @click="reload()">
					<!-- || currentIndex == 1 || currentIndex == 2 -->
					<text v-if="currentIndex == 0">
						刷新
					</text>
				</view>
			</view>
			<view v-if="loading" class="gui-padding gui-color-gray gui-h3 gui-text-center">
				{{msg}}
			</view>
			<view style="height: 100%; margin-bottom: 130rpx;" v-else>
				<!-- 卡包 -->
				<view class="gui-padding-x" v-if="menu=='card'">
					<cardlist ref="ref_cardlist" :card_type="menu=='card'?'0':'1'" />
				</view>

				<!-- 优惠券 -->
				<view class="gui-padding-x" v-if="menu=='coupon'">
					<Coupon ref="ref_coupon" />
				</view>

				<!-- 福利中心 -->
				<view class="gui-padding-x" v-if="menu=='selectCard'">
					<selectCard ref="ref_coupon" />
				</view>

				<!-- 商城 -->
				<!-- <view v-if="menu=='shop'" style="margin-top: 20rpx;">
					<business ref="ref_business"></business>
				</view> -->

				<!-- 消费记录 -->
				<view v-if="menu=='record'">
					<record ref="ref_record" />
				</view>

			</view>

			<!-- 导航菜单 -->
			<view class="gui-flex gui-space-around gui-border-t gui-bg-white gui-border-radius-large gui-box-shadow"
				style="position: fixed;bottom: 20rpx;width: 90%;padding: 20rpx 0rpx;left: 5%;z-index: 999999;">
				<view v-for="(item,index) in menus" style="display: flex; align-items: center;"
					@tap="navChange(item,index)">
					<view style="text-align: center; margin: 0 40rpx;">
						<!-- <view style="text-align: center; margin: 0 50rpx;"> -->
						<image :src="item.img" style="height: 58rpx; width: 58rpx; margin-top: -8rpx;"></image>
						<!-- gui-footer-icon-buttons-text -->
						<text style="font-size: 22rpx; margin-top: -8rpx;"
							:class="[currentIndex == index ? 'gui-primary-color' : 'gui-color-gray', 'gui-block']">
							{{item.label}}
						</text>
					</view>
				</view>
			</view>

		</template>

	</gui-page>
</template>

<script>
	import cardlist from './cardlist.vue'
	import Coupon from './Coupon.vue'
	import selectCard from './selectCard.vue'
	// import business from './business.vue'
	import record from './record.vue'

	import myRecord from './my_record.vue'

	export default {
		components: {
			// business,
			cardlist,
			Coupon,
			selectCard,
			record,
			myRecord
		},
		computed: {
			// 计算滚动区域高度
			scrollStyle() {
				const screenHeight = uni.getSystemInfoSync().windowHeight; // 获取屏幕总高度
				const scrollHeight = screenHeight - 90; // 计算滚动区域高度
				return `height: ${scrollHeight}px;`;
			},
		},
		data() {
			return {
				loading: true,
				msg: "加载中...",
				showHeader: true, //是否显示顶部导航栏
				userInfo: uni.getStorageSync("userInfo"),
				user: uni.getStorageSync("member"),
				Head_height: "85",
				// this_index: 0,
				demo2Val: "请选择具体日期",
				// 右侧弹出层 top 值
				rightAraeTop: 0,
				expenses_list: [],
				showIndex: 0,
				currentIndex: 0,
				card_type: 0,
				card_data: [],
				card_title: '卡包',
				menus: [{
						icon: '&#xe612;',
						label: '卡包',
						value: 'card',
						img: '../../static/icon/kb.png'
					},
					{
						icon: '&#xe612;',
						label: '优惠券',
						img: '../../static/icon/yhq.png',
						value: 'coupon'
					},
					{
						icon: '&#xe612;',
						label: '福利中心',
						img: '../../static/icon/xzq.png',
						value: 'selectCard'
					},
					// {
					// 	icon: '&#xe612;',
					// 	label: '商城',
					// 	value: 'shop',
					// 	img: '../../static/icon/sc.png'
					// },
					{
						icon: '&#xe612;',
						label: '消费记录',
						value: 'record',
						img: '../../static/icon/xfjl.png'
					},
				],
				menu_index: 0,
				menu: 'card',
				system: null,
			}
		},
		onLoad(opt) {
			console.log("card_index->onload", opt);
			let info = uni.getSystemInfoSync();
			this.Head_height = info.navigationBarHeight + 10;
			this.system = info.platform;

			uni.showLoading({
				title: '加载中...'
			});
			let self = this;
			uni.webView.postMessage({
				data: {
					type: "title",
					data: {
						"title": "卡包"
					}
				},
			})

			if (opt.Bearer) {
				this.showHeader = false;
				uni.setStorageSync("Bearer", opt.Bearer);
				this.$boya.NGet("/app/auth/user", null, function(res) {
					console.log("card_index->onload->auth", res);
					uni.hideLoading();
					self.user = res.member;
					uni.setStorageSync("userInfo", res.data)
					uni.setStorageSync("member", res.data.member);
					self.loading = false;
					// setTimeout(function() {
					// 	//self.$refs.ref_cardlist.ref_list(0);
					// 	self.navChange(self.menus[0],0);
					// }, 1000);
				});
				return;
			} else if (opt.code) {
				this.showHeader = false;
				this.loginx(opt.code);
				uni.hideLoading();
			} else {
				this.user = uni.getStorageSync("member");
				this.showHeader = false;
				// setTimeout(function() {
				// 	self.$refs.ref_cardlist.ref_list(0);
				// }, 200);
				uni.hideLoading();
			}

		},
		mounted() {
			console.log("mounted");
			//this.$refs.ref_cardlist.ref_list(0);
		},
		methods: {
			loginx(code) {
				let self = this
				console.log('code: ', code);
				self.$boya.NPost('/tpi/loginx', {
					code: code
				}, function(res) {
					console.log("loginx", res);
					if (res.code == 200) {
						uni.setStorageSync("member", res.data.user);
						uni.setStorageSync("Bearer", res.data.token);
						uni.showToast({
							title: '加载卡包',
							duration: 2000,
							icon: 'loading'
						})
						setTimeout(function() {
							self.$refs.ref_cardlist.ref_list(0);
						}, 500);
					} else {
						uni.showToast({
							title: '登录失败,请重试',
							duration: 2000,
							icon: 'error'
						});
					}
				}, false)
			},
			reload() {
				this.$refs.ref_cardlist.ref_list(0);
			},
			// get_shopList() {
			// 	this.$boya.NGet("app/shop/list", null, function(res) {
			// 		console.log("get_shopList", res);
			// 	}, null, {
			// 		showLoading: false
			// 	});
			// },
			open: function() {
				this.$refs.guiactionsheet.open();
			},
			// selected(item) {
			// 	this.expenses_list = []
			// 	this.this_index = item.id;
			// 	this.action_type = item.name
			// 	console.log('传入数据: ', this.action_type);
			// 	this.get_coupon_log()
			// },

			navChange(item, index) {
				var self = this
				console.log('item: ', item, index);
				this.menu = item.value;
				this.currentIndex = index
				uni.setNavigationBarTitle({
					title: item.label
				})

				uni.webView.postMessage({
					data: {
						type: "title",
						data: {
							"title": item.label
						}
					},
				})
				// setTimeout(function() {
				// 	if (index == 0) {
				// 		self.$refs.ref_cardlist.ref_list(0);
				// 		return;
				// 	}
				// 	if (index == 1) {
				// 		self.$refs.ref_coupon.get_all_coupon();
				// 		return;
				// 	}
				// }, 200);
			},

			goBack() {
				// uni.switchTab({
				// 	url: '/pages/switchPages/index'
				// })
				uni.reLaunch({
					url: "/pages/switchPages/main?p=index"
				})
			},

		}
	}
</script>

<style>
	page {
		background-color: #f1f1f1;
	}

	.demo-msg {
		white-space: nowrap;
		line-height: 50rpx;
		font-size: 25rpx;
	}

	.demoBg {
		height: 100rpx;
		background-color: #FFFFFF;
		border: 1px solid #cccccc;
		/* padding-top: 5rpx; */
		padding: 12rpx 0 10rpx 0;
		/* border-radius: 10rpx; */
	}

	.filter-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #f0f0f0;
		padding: 15rpx;
		background-color: white;
	}

	.dashed-border {
		border-bottom: 1px dashed #ccc;
		/* 设置虚线边框，1px 宽度，颜色 #ccc */
		padding: 20rpx;
		/* 设置内边距，可根据实际需求调整 */
	}

	.fixed-top-view {
		height: 100rpx;
	}

	.graceSelectMenuItem {
		width: 180rpx;
	}

	.price-input {
		width: 120rpx;
		padding: 10rpx 0;
		border-radius: 5rpx;
		text-align: center;
	}

	.right-area-footer {
		width: 580rpx;
		height: 100rpx;
	}

	.right-area-footer-btn {
		width: 200rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.gui-card-item {
		text-align: center;
	}

	.gui-card-img {
		width: 330rpx;
		height: 330rpx;
	}


	.ios0 {
		position: fixed;
		width: 100%;
		z-index: 99;
		bottom: 55rpx;
	}

	.android0 {
		position: fixed;
		width: 100%;
		z-index: 99;
		bottom: 0;
	}

	.ios {
		margin-top: 20rpx;
		margin-bottom: 100rpx;
	}

	.android {
		margin-top: 20rpx;
	}

	.ios2 {
		margin-bottom: 30rpx;
	}

	.ios3 {
		margin-bottom: 55rpx;
	}
</style>